<template>
  <div>
    <!-- 输入框 -->
    <div
      class="search-bar"
      style="
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        color: #777;
        background: #fff;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
        z-index: 3;
      "
    >
      <div
        class="search-box"
        style="
          position: relative;
          height: 60rpx;
          background: #f7f7f7;
          z-index: 999;
          width: 80%;
          margin-left: 70rpx;
          border-radius: 50rpx;
          margin: 20rpx 0 20rpx 20rpx;
        "
      >
        <input
          type="text"
          @confirm="onSearch"
          placeholder="输入关键字搜索"
          v-model="searchVal"
          style="
            height: 60rpx;
            border-radius: 50rpx;
            border: 0;
            margin: 0 30rpx 0 64rpx;
            line-height: 48rpx;
            vertical-align: top;
            background: #f7f7f7;
            font-size: 28rpx;
          "
        />
        <image
          src="../../../static/images/icon/search.png"
          style="
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            left: 20rpx;
            top: 14rpx;
            display: block;
          "
        />
      </div>
      <span
        style="
          font-size: 28rpx;
          position: absolute;
          right: 30rpx;
          top: 31rpx;
          color: #eb2444;
        "
        >取消</span
      >
    </div>
    <!-- 搜索模块 -->
    <div
      class="search-display"
      style="background: #fff; padding: 20rpx; margin-top: 100rpx"
    >
      <div class="hot-search" style="">
        <div style="padding: 30rpx 0; font-size: 30rpx; color: #666">
          热门搜索
        </div>
      </div>
      <div
        class="history-search"
        style="
          padding: 30rpx 0;
          font-size: 30rpx;
          color: #666;
          position: relative;
          border-top: 2rpx solid #e1e1e1;
        "
      >
        搜索历史
        <div>
          <img
            src="../../../static/images/icon/clear-his.png"
            alt=""
            @click="removeStg"
            style="
              width: 32rpx;
              height: 32rpx;
              position: absolute;
              right: 10rpx;
              top: 30rpx;
            "
          />
        </div>
      </div>
      <div
        style="
          overflow: hidden;
          font-size: 26rpx;
          text-align: center;
          display: inline-block;
        "
      >
        <span
          style="
            max-width: 300rpx;
            overflow: hidden;
            float: left;
            border-radius: 50rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            background-color: #f2f2f2;
            box-sizing: border-box;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            padding: 10rpx 30rpx;
          "
          v-for="(item, index) in recentSearch"
          :key="index"
          @click="onSearchData(item)"
          >{{ item }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchVal: "",
      recentSearch: uni.getStorageSync("recentSearch")
        ? JSON.parse(uni.getStorageSync("recentSearch"))
        : [],
    };
  },
  methods: {
    onSearch() {
      if (this.searchVal.trim()!=="") {
        wx.navigateTo({
          url: `../searchResult/index?val=${this.searchVal}`,
        });
        let filters = this.recentSearch.filter(
          (item) => item === this.searchVal
        );
        if (!filters.length > 0) this.recentSearch.unshift(this.searchVal);
        uni.setStorageSync("recentSearch", JSON.stringify(this.recentSearch));
        this.searchVal = "";
      }
    },
    onSearchData(items){
      this.searchVal = items;
      this.onSearch();
    },
    removeStg() {
      uni.removeStorageSync("recentSearch");
      this.recentSearch.splice(0, this.recentSearch.length);
    },
  },
};
</script>

<style>
</style>